// import React, { Component } from 'react';
// import Link from 'umi/link';
// import ReactEcharts from 'echarts-for-react';

// import styles from "./style.less";

// class Part3 extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       chartData: {
//         color: ['#f35245'],
//         tooltip: {
//           trigger: 'axis',
//           axisPointer: {            // 坐标轴指示器，坐标轴触发有效
//             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//           }
//         },
//         grid: {
//           left: '3%',
//           right: '4%',
//           bottom: '3%',
//           containLabel: true
//         },
//         xAxis: [
//           {
//             type: 'category',
//             data: [],
//             axisTick: {
//               alignWithLabel: true
//             }
//           }
//         ],
//         yAxis: [
//           {
//             type: 'value'
//           }
//         ],
//         series: [
//           {
//             name: '房产数量',
//             type: 'bar',
//             data: []
//           }
//         ]
//       }
//     };
//   }

//   componentWillReceiveProps(nextProps) {
//     if (nextProps.data.rented !== undefined) {
//       let chartData = JSON.parse(JSON.stringify(this.state.chartData));
//       chartData.xAxis[0].data=[];
//       chartData.series[0].data=[];
//       for (let i = 0, len = nextProps.data.columnarChart.length; i < len; i++) {
//         chartData.xAxis[0].data.push(nextProps.data.columnarChart[i]['transfer_unit']);
//         let total = 0;
//         for (const key in nextProps.data.columnarChart[i]) {
//           if (!isNaN(Number(nextProps.data.columnarChart[i][key]))) {
//             total += nextProps.data.columnarChart[i][key];
//           };
//         };
//         chartData.series[0].data.push(total);
//       };

//       this.setState({
//         chartData
//       });
//     };
//   }
//   render() {
//     const cols = {
//       sales: {
//         tickInterval: 20
//       }
//     };
//     return (
//       <div className={`${styles.part3} clearfix`}>
//         <div>
//           <div className='contentHeader'>
//             <div className="contentHeaderTitle">
//               <p>房产概要</p>
//               <p>PROPERTY SUMMARY</p>
//             </div>
//             <div className={styles.chart}>
//               <ReactEcharts
//                 option={this.state.chartData}
//                 notMerge={true}
//                 lazyUpdate={true}
//                 style={{
//                   height: 455
//                 }}
//               />
//             </div>
//           </div>
//         </div>
//       </div>
//     );
//   }
// }

// export default Part3;


import React, { Component } from 'react';

import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import {
  Table,
  Col,
  Row,
  Icon,
  Input,
  Spin,
  Button,
  Modal,
  message
} from 'antd';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import ReactEcharts from 'echarts-for-react';
import axios from 'axios';
import Api from '../../services/apis';

const Search = Input.Search;
@connect(({ user, project, activities, chart, loading }) => ({
  currentUser: user.currentUser,
  currentUserLoading: loading.effects['user/fetchCurrent']
}))
class StatisticalAnalysisOfHousingUse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchVal: '',
      barData: {
        color: ['#f35245'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['保障性住房', '公房', '学校宿舍', '住宅', '临建房', '车库'],
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            data: []
          }
        ]
      },
      chartLoading: true,
      tableLoading: true,
      tableData: [],
      showDownload: false,
      downloadLink: '',
      startDownload: false,
      downloadName: '',

    }
  }

  handleSearch(searchVal = '') {
    this.setState({
      searchVal,
      chartLoading: true
    });
    axios.post(Api.houseCount, {
      transferUnit: searchVal
    }).then((res) => {
      let barData = JSON.parse(JSON.stringify(this.state.barData));
      barData.series[0].data.push(res.data.guaranteeCount)
      barData.series[0].data[0] = res.data.guaranteeCount;
      barData.series[0].data[1] = res.data.publicCount;
      barData.series[0].data[2] = res.data.dormitoryCount;
      barData.series[0].data[3] = res.data.houseCount;
      barData.series[0].data[4] = res.data.temporaryCount;
      barData.series[0].data[5] = res.data.carCount;
      this.setState({
        chartLoading: false,
        barData
      });
    });

    axios.post(Api.houseCountByUnit, {
      transferUnit: searchVal
    }).then((res) => {
      for (let i = 0, len = res.data.length; i < len; i++) {
        res.data[i].key = i;
      };
      this.setState({
        tableLoading: false,
        tableData: res.data
      });
    });
  }
  showDownload(showDownload) {
    this.setState({ showDownload });
  }
  exportExcel() {
    this.setState({
      startDownload: false
    });
    axios.get(Api.exportExcel, {
      params: {
        transferUnit: this.state.transferUnit
      },
      responseType: 'arraybuffer'
    }).then((res) => {
      message.success('开始下载！');
      let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
      const [dLink, name] = [
        window.URL.createObjectURL(blob),
        `资产接收列表${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}.xls`
      ];
      let link = document.createElement('a');
      link.href = dLink;
      link.download = name;
      link.click();
      this.setState({
        startDownload: true,
        downloadLink: dLink,
        downloadName: name,
        showDownload: true
      });
    }).catch((err) => {
      message.error(`下载失败，请重试！`);
    });
  }
  componentWillMount() {
    this.handleSearch();
  }
  render() {
    const {
      currentUserLoading,
    } = this.props;
    const columns = [
      {
        title: '划转单位',
        dataIndex: 'unit',
        key: 'unit',
      },
      {
        title: '保障性住房',
        dataIndex: 'guaranteeCount',
        key: 'guaranteeCount',
      },
      {
        title: '公房',
        dataIndex: 'publicCount',
        key: 'publicCount'
      },
      {
        title: '学校宿舍',
        dataIndex: 'dormitoryCount',
        key: 'dormitoryCount',
      },
      {
        title: '住宅',
        dataIndex: 'houseCount',
        key: 'houseCount',
      },
      {
        title: '临建房',
        dataIndex: 'temporaryCount',
        key: 'temporaryCount',
      },
      {
        title: '车库',
        dataIndex: 'carCount',
        key: 'carCount',
      },
    ];
    return (
      <div>
        <Spin spinning={this.state.chartLoading}>
          <div>
            <ReactEcharts
              option={this.state.barData}
              notMerge={true}
              lazyUpdate={true}
              style={{
                height: 600
              }}
            />
          </div>
        </Spin>
      </div>
    );
  }
}

export default StatisticalAnalysisOfHousingUse;